<template>
	<div class="box" ref="box"
		:style="{ width: width ? width + 'px' : '500px', height: height ? height + 'px' : '500px' }"></div>
</template>


<script lang="ts" setup>
import { defineProps, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps(['option', "width", "height"])
const box = ref<HTMLElement | null>(null)
onMounted(() => {
	if (box.value) {
		const myChart = echarts.init(box.value);
		myChart.setOption(props.option)
		watch(props.option, () => {
			myChart.setOption(props.option)
		})
	}
})
</script>

